<template>
    <div>
        <h1>Reactive Proxy vs. Original</h1>
        <p>值得注意的是，reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的 </p>
    </div>
</template>

<script lang="ts">
export default {
    name: 'diyDemo32'
}

</script>

<script setup lang='ts'>
import { reactive } from 'vue';


let raw = {}
let proxy = reactive(raw)

console.log(raw === proxy); // false reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的
console.log(reactive(raw) === proxy); // true

let raw2 = { name: '张长春' }
let raw3 = {}
console.log(raw === raw3);  // false 即它们都是空对象，它们在内存中的地址是不同的，所以结果为 false

let proxy2: any = reactive(raw2)
let proxy3 = reactive(JSON.parse(JSON.stringify(raw2)))

proxy2.name = '周志超'

console.log(proxy);
console.log(proxy2);
console.log(proxy3);
console.log(proxy2 === proxy3); // false     proxy2 和 proxy3 是两个不同的对象，所以结果为 false    

// 在一个代理上调用 reactive() 会返回它自己
console.log(reactive(proxy) === proxy); // true

proxy2.next = raw

let num = 3
proxy2.next2 = num
console.log(proxy2.next2 === num); // true， num 不是引用类型，不会包装

let obj = {}
proxy2.next = obj
console.log(proxy2.next === obj); // false， obj 是引用类型，会用 reactive 再包装 

console.log(proxy2.next);




</script>

<style></style>